import { UiButton } from "@/shared/Uikit";
import { Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react";
import CreateInteractiveModelBlockForm from "./CreateInteractiveModelBlockForm";


type CreateInteractiveModelBlockButtonProps = {
    onSuccess?: (modelId: number) => void
}

export default function CreateInteractiveModelBlockButton(props: CreateInteractiveModelBlockButtonProps) {
    const { isOpen, onOpenChange, onOpen } = useDisclosure()


    return (
        <>
            <UiButton
                onClick={onOpen}
                variant='secondary'
            >
                <img
                    src="/icons/model.svg"
                    alt='model'
                    width={'20px'}
                    height={'20px'}
                />
            </UiButton>
            <Modal
                className=' fixed top-1/2 left-1/2 -translate-x-1/2 h-fit -translate-y-1/2 bottom-0  bg-white p-5 rounded-lg'
                isOpen={isOpen}
                onOpenChange={onOpenChange}
            >
                <ModalContent className='w-1/2'>
                    {(onClose) => (
                        <>
                            <ModalBody className='p-5 items-center'>
                                <div className='w-full ' >
                                    <CreateInteractiveModelBlockForm
                                        onSuccess={(modelId) => {
                                            onClose()
                                            if (props.onSuccess) {
                                                props.onSuccess(modelId)
                                            }
                                        }}
                                    />
                                </div>
                            </ModalBody>
                        </>
                    )}
                </ModalContent>
            </Modal>
        </>
    )
}